<template>
  <div>
    <panel title="组件描述">
      <p>轮播图组件。</p>
      <wy-swiper />
    </panel>

    <panel title="Props">
      <table class="table">
        <thead>
          <tr>
            <th>字段</th>
            <th>必填</th>
            <th>类型</th>
            <th>默认</th>
            <th>可选</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in 5" :key="index">
            <td>type</td>
            <td>x</td>
            <td>String</td>
            <td>primary</td>
            <td>
              <ul>
                <li>default</li>
                <li>primary</li>
                <li>danger</li>
                <li>warning</li>
                <li>info</li>
                <li>success</li>
              </ul>
            </td>
            <td>按钮类型当plain为true时，default与primary效果一样</td>
          </tr>
        </tbody>
      </table>
    </panel>

    <panel title="Slots">
      <table class="table">
        <thead>
          <tr>
            <th>名称</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in 5" :key="index">
            <td>默认slot</td>
            <td>按钮内容</td>
          </tr>
        </tbody>
      </table>
    </panel>

    <panel title="Events">
      <table class="table">
        <thead>
          <tr>
            <th>名称</th>
            <th>参数</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in 3" :key="index">
            <td>@change</td>
            <td>
              <ul><li>value</li></ul>
            </td>
            <td>值改变事件参数value表示当前值</td>
          </tr>
        </tbody>
      </table>
    </panel>

    <panel title="Methods">
      <table class="table">
        <thead>
          <tr>
            <th>名称</th>
            <th>参数</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in 3" :key="index">
            <td>validate()</td>
            <td>
              <ul><li>-</li></ul>
            </td>
            <td>
              在给定了验证器的情况下执行验证
              返回一个Promise实例
              需要同时验证多个表单时请使用Promise.all()方法
            </td>
          </tr>
        </tbody>
      </table>
    </panel>

    <panel title="使用示例">
      <coding
        lang="html"
        content="
        <au-button type='primary' @click='loading = !loading'>按钮</au-button>
        <au-button type='primary' :disabled='true'>按钮</au-button>
        <au-button type='primary' :loading='loading'>按钮</au-button>
      "
      ></coding>
    </panel>
  </div>
</template>

<script>
import Panel from '@/components/Panel.vue'
import Coding from '@/components/Coding.vue'
export default {
  components: {
    Panel,
    Coding
  },
  data () {
    return {
      goods: [
        {
          image:
            'http://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/48252/3/11042/41399/5d81a971Eb119a93b/b83169de68ad9759.jpg.webp',
          title: '第1个商品'
        },
        {
          image:
            'http://img10.360buyimg.com/mobilecms/s280x280_jfs/t1/99434/4/14470/176774/5e659f62E32cd5cdb/688399217924c834.jpg.webp',
          title: '第2个商品'
        },
        {
          image:
            'http://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/48252/3/11042/41399/5d81a971Eb119a93b/b83169de68ad9759.jpg.webp',
          title: '第1个商品'
        },
        {
          image:
            'http://img10.360buyimg.com/mobilecms/s280x280_jfs/t1/99434/4/14470/176774/5e659f62E32cd5cdb/688399217924c834.jpg.webp',
          title: '第2个商品'
        },
        {
          image:
            'http://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/48252/3/11042/41399/5d81a971Eb119a93b/b83169de68ad9759.jpg.webp',
          title: '第1个商品'
        },
        {
          image:
            'http://img10.360buyimg.com/mobilecms/s280x280_jfs/t1/99434/4/14470/176774/5e659f62E32cd5cdb/688399217924c834.jpg.webp',
          title: '第2个商品'
        },
        {
          image:
            'http://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/48252/3/11042/41399/5d81a971Eb119a93b/b83169de68ad9759.jpg.webp',
          title: '第1个商品'
        },
        {
          image:
            'http://img10.360buyimg.com/mobilecms/s280x280_jfs/t1/99434/4/14470/176774/5e659f62E32cd5cdb/688399217924c834.jpg.webp',
          title: '第2个商品'
        }
      ]
    }
  }
}
</script>
